const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
// css压缩
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// js压缩
const TerserPlugin = require("terser-webpack-plugin");
// 测试
const BannerWebpakcPlugin = require("./plugins/banner-webpack-plugin");
// const WorkboxPlugin = require("workbox-webpack-plugin");
// const { includes } = require("lodash");
// const { type } = require("os");

module.exports = (env) => {
  // console.log(env);
  // console.log(process.env.ASSET_PATH);
  return {
    entry: "./src/main.ts",
    // entry: {
    //   app1: "./src/main.js",
    //   app2: "./src/main1.js",
    // },
    output: {
      path: path.resolve(__dirname + "/dist"),
      // filename: "bundle.js",
      // library: "bundle",
      filename: "static/js/[name][contenthash].js",
      chunkFilename: "static/js/[name][contenthash].chunk.js",
      // 设置asset/resource输出目录
      assetModuleFilename: "images/[contenthash][ext][query]",
      clean: true,
    },
    module: {
      rules: [
        { test: /\.css$/, use: "css-loader", exclude: /node_modules/ },
        // { test: /\.ts$/, use: "ts-loader", exclude: /node-modules/ },
        {
          test: /\.png|jpe?g|gif/,
          type: "asset/resource",
          // generator: {
          //   filename: "images/[hash][ext][query]",
          // },
        },
        {
          test: /\.less$/,
          exclude: /node_modules/,
          use: [
            process.env.production
              ? MiniCssExtractPlugin.loader
              : "vue-style-loader",
            "css-loader",
            "less-loader",
          ],
        },
        {
          test: /\.json$/,
          exclude: /node_modules/,
          use: "json-loader",
          type: "javascript/auto",
        },
        {
          test: /\.tsx?$/,
          // use: "babel-loader",
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env", "@babel/preset-typescript"],
                plugins: ["@vue/babel-plugin-jsx"],
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.vue$/,
          loader: "vue-loader",
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      // new webpack.ProgressPlugin(), // 构建进度可用可不用，去掉可提升构建速度
      // new CleanWebpackPlugin(),
      new htmlWebpackPlugin({
        template: "./public/index.html",
      }),
      new VueLoaderPlugin(),
      // vue警告处理
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: JSON.stringify(true),
        __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
      }),
      new MiniCssExtractPlugin(),
      new BannerWebpakcPlugin({
        author: "我是测试",
      }),
      // 离线体验优化
      // new WorkboxPlugin.GenerateSW({
      //   // 这些选项帮助快速启用 ServiceWorkers
      //   // 不允许遗留任何“旧的” ServiceWorkers
      //   clientsClaim: true,
      //   skipWaiting: true,
      // }),
    ],
    performance: {
      hints: "warning", // 枚举
      maxAssetSize: 30000000, // 整数类型（以字节为单位）
      maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
    },
    optimization: {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          // vendors: {
          //   test: /[\\/]node_modules[\\/]/,
          //   name: "vendors",
          // },
          vue: {
            test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
            name: "vue",
          },
          lodash: {
            test: /[\\/]node_modules[\\/]lodash(.*)[\\/]/,
            name: "lodash",
          },
        },
      },
      // runtimeChunk: "single",
      runtimeChunk: {
        name: (entrypoint) => `runtime~${entrypoint.name}`,
      },
      minimize: true,
      minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    },
    resolve: {
      extensions: [".vue", ".ts", ".js", ".json"],
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    devtool: "eval-cheap-module-source-map",
    devServer: {
      port: 3000,
      hot: true,
      open: false,
      historyApiFallback: true,
    },
    mode: "development",
    // mode: "production",
    // mode: env.production ? "production" : "development",
  };
};
